<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据表格</title>
		<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/>
		<script src="layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<div class="demoTable">
		    搜索ID：
		    <div class="layui-inline">
		        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
		    </div>
		    <button class="layui-btn" id="searchBtn">搜索</button>
		</div>

		
		<!-- 准备容器（标签），设置id属性值 -->
		<table id="demo" lay-filter="test"></table>
		
		<!-- 表格工具栏 -->
		<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
				<!-- lay-event 给元素绑定事件名 -->
				<button class="layui-btn layui-btn-sm" lay-event="getCheckData">
					获取选中行数据
		    	</button>
				<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">
					获取选中数目
		    	</button>
				<button class="layui-btn layui-btn-sm" lay-event="isAll">
					验证是否全选
		    	</button>
		    </div>
		</script>
		
		<!-- 表头工具栏 -->
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		
		<script type="text/javascript">
			// 加载table模块
			layui.use("table",function(){
				var table = layui.table;
				var $ = layui.jquery; // 获取jquery对象
				
				// 加载table实例
				table.render({
					elem:"#demo", // elem属性用来绑定容器的id属性值
					url:"js/user.json", // 数据接口
					cols:[[
						// 设置序列号列
						{field:'aa',type:"numbers"},
						// 设置复选框列
						{field:'aa',type:"checkbox"},
						{field:'id',title:'用户编号',sort:true,width:120,hide:true},
						{field:'username',title:'用户姓名',width:100,edit:'text'},
						{field:'sex',title:'性别',width:100,sort:true},
						{field:'city',title:'城市',width:100},
						{field:'sign',title:'签名',edit:'text'},
						// 设置表头工具栏
						{field:"操作",toolbar:"#barDemo"}
					]],
					// 开启分页
					page:true,
					// 设置表格工具栏
					toolbar:"#toolbarDemo"
				});		
						
				/**
				 * 头监听事件
				 * 	语法：
				 * 		table.on('toolbar(demo)',function(obj){
					 
						});
						注：demo表示的是容器上设置的lay-filter属性值
				 */		
				table.on('toolbar(test)',function(obj){
					// console.log(obj);
					// obj.config对象中可以获取id属性值，即表示当前容器的ID属性值，也就是demo 
					// 获取当前表格被选中记录对象，返回数据
					var checkStatus = table.checkStatus(obj.config.id);
					console.log(checkStatus);
					// 获取事件名
					var eventName = obj.event;
					// 判断事件名，执行对应的代码
					switch (eventName){
						case "getCheckData":
							// 获取被选中的记录的数组
							var arr = checkStatus.data;
							// 将数组解析成字符串
							layer.alert(JSON.stringify(arr));
							break;
						case "getCheckLength":
							// 获取被选中的记录的数组
							var arr = checkStatus.data;
							layer.msg("选中了" + arr.length +"条记录！")
							break;
						case "isAll":
							// 通过isAll属性判断是否全选
							var flag = checkStatus.isAll;
							var str = flag ? '全选' : '未全选';
							layer.msg(str);
							break;
						case "LAYTABLE_TIPS":
							layer.alert("这是一个自定义的图标按钮");
							break;
					}
				});		
				
				/**
				 * 监听行工具栏事件
				 */
				table.on('tool(test)',function(obj){
					// 得到当前操作行的相关信息
					var tr = obj.data;
					console.log(tr);
					// 得到事件名
					var eventName = obj.event;
					
					// 判断事件名，执行对应的方法
					if (eventName == 'del') { // 删除
						// 确认框
						layer.confirm("您确认要删除吗？",function(index){
							// 删除指定tr  del()
							obj.del();
							// 关闭弹出层（index是当前弹出层的下标）
							layer.close(index);
							
						});
						
					} else if (eventName == 'edit') { // 编辑
						// 输出框
						layer.prompt({
							// 表单元素的类型 0=文本框  1=密码框 2=文本域
							formType:0,
							value:tr.username // 设置输入框的值
						},function(value,index){
							// 修改指定单元格的值
							// value表示输入的值
							obj.update({
								username:value
							});
							// 关闭弹出层
							layer.close(index);
						});						
					}
				});
				
				/**
				 * 监听单元格编辑事件
				 * 		表头设置edit属性， 单元格编辑类型（默认不开启）目前只支持：text（输入框）
				 */
				table.on('edit(test)',function(obj){
					console.log(obj);
					// 获取修改后的值
					var value = obj.value;
					// 得到当前修改的tr对象
					var data = obj.data;
					// 得到修改的字段名
					var field = obj.field;
					
					layer.msg("【ID:"+data.id+"】的"+field+"字段的值修改为：" + value);
				});
				
				
				/**
				 * 给指定元素绑定事件
				 */
				$(document).on('click','#searchBtn',function(data){
					// 获取搜索文本框对象
					var sreach = $("#demoReload");
					// 调用数据表格的重载方法  table.reload(ID, options)
					table.reload('demo',{
						where:{ // 设置需要传递的参数
							id:sreach.val(),
							name:"zhangsan"
						},
						page:{
							// 表示让条件查询从第一页开始；如果未设置则从当前页开始查询，此页前面的所有数据不纳入条件筛选
							curr:1 // 从第一页开始
						}
					});
				});
				
			});
			
			
		</script>
	</body>
</html>
